<script lang="ts" setup name="VabSettingUser">
import { PictureRounded } from '@element-plus/icons-vue'
import { FormInstance, FormRules } from 'element-plus'
import { User } from '~/src/api/interface/user'
import { editUserInfoAPI } from '~/src/api/user'
import { useUserStore } from '~/src/store/modules/user'
import { genderType } from '~/src/utils/serviceDict'
import { Emits, Props } from './interface'
type Keys = keyof typeof userInfo
const store = useUserStore()
const { editUserInfo } = storeToRefs(store)
const userInfo = ref<User.UserInfo>({
  avatar: '',
  id: 0,
  idCard: null,
  introduction: '',
  loginRoleCategoryId: 0,
  nickName: '',
  phone: '',
  sex: 1,
  trueName: '',
})
const visible = ref(false)
const props = defineProps<Props>()
const emits = defineEmits<Emits>()
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal) {
      console.log(editUserInfo)
      userInfo.value = store.editUserInfo
    }
  }
)

const dialogVisible = useVModel(props, 'modelValue', emits) // v-model**
const onConfirm = async (type: string) => {
  if (type === 'submit') {
    await formRef.value?.validate()
    await editUserInfoAPI(userInfo.value)
    ElMessage.success('修改成功')
  }
  dialogVisible.value = false
}
const formRef = ref<FormInstance>()
const rules: FormRules = {
  phone: [{ required: true, message: '请输入手机号' }],
  nickName: [{ required: true, message: '请输入用户名' }],
}
</script>

<template>
  <div>
    <vab-dialog v-model:modelValue="dialogVisible" title="个人信息" :width="600">
      <el-form ref="formRef" label-width="80px" :model="userInfo" :rules="rules">
        <el-form-item label="头像" prop="avatar">
          <upload-img v-model:imageUrl="userInfo.avatar">
            <template #tip>
              <p class="font-size12">头像大小不能超过3M</p>
            </template>
            <template #empty>
              <el-icon><picture-rounded /></el-icon>
              <span>请上传图片</span>
            </template>
          </upload-img>
        </el-form-item>
        <el-form-item label="用户名" prop="nickName">
          <el-input v-model="userInfo.nickName" placeholder="" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userInfo.phone" placeholder="" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="userInfo.sex" placeholder="">
            <el-option v-for="item in genderType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="真实姓名" prop="trueName">
          <el-input v-model="userInfo.trueName" placeholder="" />
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
          <el-input v-model="userInfo.introduction" placeholder="" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="onConfirm('submit')">保存</el-button>
        <el-button @click="onConfirm('cancel')">取消</el-button>
      </template>
    </vab-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
